<#assign ctx=request.contextPath/>
<!DOCTYPE html>
<#--<#include "parent.ftl" />-->
<html lang="en">
<head>
    <base id="ctx" href="${ctx}">
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="${ctx}/jquery-easyui-1.7.0/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/jquery-easyui-1.7.0/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <script src="${ctx}/jquery-easyui-1.7.0/jquery.min.js"></script>
    <script src="${ctx}/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
    <script src="${ctx}/jquery-easyui-1.7.0/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <table id="user_datagrid" class="easyui-datagrid"
           toolbar="#toolbar"
           rownumbers="true" fitColumns="true" singleSelect="false">
        <thead>
        <tr>
            <th field="id" width="50">编号</th>
            <th field="name" width="50">名字</th>
            <th field="age" width="50">年龄</th>
            <th field="sex" width="50">性别</th>
            <th field="birthday" width="50">生日</th>
        </tr>
        </thead>
    </table>
    <div id="toolbar">
        <div>
            <a class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
            <a class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
            <a class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
        </div>
        <div>
            <span>ID:</span>
            <input id="query_id" class="easyui-textbox" style="line-height:26px;border:1px solid #ccc">
            <span>name:</span>
            <input id="query_name" class="easyui-textbox" style="line-height:26px;border:1px solid #ccc">
            <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
        </div>
    </div>

    <div id="user_dialog" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
         closed="true" buttons="#user_dialog-buttons">
        <div class="ftitle">User Information</div>
        <form id="fm" method="post">
            <div class="fitem">
                <label>id:</label>
                <input id="id" name="id" class="easyui-textbox">
            </div>
            <div class="fitem">
                <label>name:</label>
                <input id="name" name="name" class="easyui-textbox">
            </div>
            <div class="fitem">
                <label>age:</label>
                <input id="age" name="age" class="easyui-textbox">
            </div>
            <div class="fitem">
                <label>sex:</label>
                <input id="sex" name="sex" class="easyui-textbox">
            </div>
            <div class="fitem">
                <label>birthday:</label>
                <input id="birthday" class="easyui-datetimebox" name="birthday" style="width:150px">
            </div>
        </form>
    </div>
    <div id="user_dialog-buttons">
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#user_dialog').dialog('close')">Cancel</a>
    </div>

    <script type="text/javascript">
        $(function () {
            initTable();
        })

        function doSearch(){
            $('#user_datagrid').datagrid('reload',{
                id: $('#query_id').textbox("getValue")
            });
        }

        function saveUser(){
            $('#fm').form('submit',{
                url: "${ctx}/user/edit",
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if (result.success){
                        $('#user_dialog').dialog('close');		// close the dialog
                        $('#user_datagrid').datagrid('reload');	// reload the user data
                    }
                    $.messager.alert({
                        title: '提示',
                        msg: result.message
                    });
                }
            });
        }

        function newUser(){
            openUserDialog();
        }

        function editUser(){
            var row = $('#user_datagrid').datagrid('getSelected');
            if(row){
                openUserDialog();
                $("#id").textbox("setValue", row.id);
                $("#name").textbox("setValue", row.name);
                $("#age").textbox("setValue", row.age);
                $("#sex").textbox("setValue", row.sex);
                $("#birthday").datetimebox("setValue", row.birthday);
            }else{
                $.messager.alert({	// show error message
                    title: '提示',
                    msg: "请选中一条要修改的记录"
                });
            }
        }

        function openUserDialog(){
            $('#user_dialog').dialog('open').dialog('setTitle','New User');
            $('#fm').form('clear');
        }

        function initTable(){
            $('#user_datagrid').datagrid({
                fit:true,
                pagination: true,     //开启分页
                pageSize: 10,         //分页大小
                pageNumber:1,         //第几页显示（默认第一页，可以省略）
                pageList: [10, 20, 30,40], //设置每页记录条数的列表
                url: '${ctx}/user/find_page_info',  //获取数据地址
            });

            var p = $('#user_datagrid').datagrid('getPager');
            $(p).pagination({
                beforePageText: '第',//页数文本框前显示的汉字
                afterPageText: '页    共 {pages} 页',
                displayMsg: '第{from}到{to}条，共{total}条',
            });
        }

        function destroyUser(){
            var ids = [];
            var rows = $('#user_datagrid').datagrid('getSelections');
            if (rows != null && rows.length > 0){
                for(var i=0;i<rows.length;i++){
                    ids.push(rows[i].id);
                }
                $.messager.confirm('提示','您确定要删除选中的记录吗?',function(r){
                    if (r){
                        $.ajax( {
                            url:"${ctx}/user/deletes",
                            data:{ids:ids},
                            dataType:"json",
                            traditional:true,
                            success:function(data){
                                if (data.success){
                                    $('#user_datagrid').datagrid('reload');	// reload the user data
                                }
                                $.messager.alert({	// show error message
                                    title: '提示',
                                    msg: data.message
                                });
                            },
                            error:function(){alert("请求错误");},
                            type:"POST"
                        });
                    }
                });
            }else{
                $.messager.alert({	// show error message
                    title: '提示',
                    msg: "请至少选中一条要删除的记录"
                });
            }
        }
    </script>
</body>
</html>